<script setup lang="tsx">
import { getEnumApi, getListApi } from '@/api/orderReturn'
import { useEnumeratePicker } from '@/utils'
const { t } = useI18n()
const { push } = useRouter()
import { ref } from 'vue'
// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})

// 使用 ref 声明响应式变量 isExpanded
const isExpanded = ref(true)

// 切换展开/收起状态的方法
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 定义 dataList 变量
const dataList = ref<any[]>([])
//初始化请求
const initialize = async () => {
  try {
    const params = {
      customer_id: props.currentRow.id,
      pageIndex: 1,
      pageSize: 500
    }
    const resp = await getListApi(params)
    dataList.value = resp.data.list || []
  } catch (error) {}
}
//获取枚举
const optionSet = ref<Record<string, any>>({})
const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'all' })
  optionSet.value = resp?.data || []
}
if (props.currentRow) {
  initialize()
  getDropDownBoxInfo()
}

//跳转详情
const handleDetail = (row: Record<string, any>) => {
  push({
    path: `/order/orderReturn/detail`,
    query: { [(row && 'id') as string]: row?.id }
  })
}
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>退货退款</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-table
          :data="dataList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('orderReturn.returnorder_no')"
            min-width="250"
            :show-overflow-tooltip="true"
            prop="returnorder_no"
          />
          <el-table-column
            :label="t('orderReturn.returnorder_type')"
            min-width="250"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.returnorder_type, row.returnorder_type) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderReturn.order_type')"
            prop="order_type"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.order_type, row.order_type) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderReturn.signatory')"
            prop="signatory"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.operator, row.signatory) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('orderReturn.total_amount')"
            prop="total_amount"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.paid_amount')"
            prop="paid_amount"
            min-width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('orderReturn.status')"
            prop="status"
            min-width="200"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.status, row.status) }}
            </template>
          </el-table-column>

          <el-table-column
            :label="t('supply.create_time')"
            min-width="180"
            prop="create_time"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('supply.creator')"
            min-width="100"
            prop="creator"
            :show-overflow-tooltip="true"
          >
            <template #default="{ row }">
              {{ useEnumeratePicker(optionSet.operator, row.creator) }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('supply.update_time')"
            min-width="180"
            prop="update_time"
            :show-overflow-tooltip="true"
          />
          <el-table-column fixed="right" label="操作" width="200">
            <template #default="{ row }">
              <el-button type="success" @click="handleDetail(row)" size="small">
                {{ t('action.detail') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
